<template>
	<div class="regPage">
		<div class="Obscuration"></div>
		<div class="container">
			<div class='title'>
				校园交友平台
			</div>
			<el-form autocomplete="on" :model="regForm" :rules="regRules" ref="regForm" label-position="left"
				style="width: 90%;margin-left: 5%;margin-top: 2%;">
				<el-form-item prop="username">
					<el-input name="username" type="text" v-model="regForm.username" autocomplete="on"
						placeholder="请输入用户名" maxlength='20'>
						<span slot="prefix">
							<i class="iconfont icon-user"></i>
						</span>
					</el-input>
					<div class="reg-hint" @click="handleLogin">已有账户-->立即<span class="reg-hint-item">登录</span></div>
				</el-form-item>
				<el-form-item prop="password">
					<el-input name="password" type="password" @keyup.enter.native="handleRegister"
						v-model="regForm.password" autocomplete="on" placeholder="请输入密码" show-password maxlength='16'>
						<span slot="prefix">
							<i class="iconfont icon-psw"></i>
						</span>
					</el-input>
				</el-form-item>
				<el-form-item prop="signature">
					<el-input name="signature" type="text" v-model="regForm.signature" autocomplete="on"
						placeholder="个性签名" maxlength='80'>
						<span slot="prefix">
							<i class="iconfont icon-qianming"></i>
						</span>
					</el-input>
				</el-form-item>
				<el-form-item prop="hobbylist">
					<el-button class="button-new-tag" size="small" @click="showTagDetail">添加爱好</el-button>
					<el-tag :key="tag" v-for="tag in regForm.hobbylist" closable class="video-tag"
						:disable-transitions="false" @close="tagRemove(tag)">{{tag}}</el-tag>
				</el-form-item>
				<el-form-item prop="gender">
					<el-radio v-model="regForm.gender" :label="1">男</el-radio>
					<el-radio v-model="regForm.gender" :label="0">女</el-radio>
				</el-form-item>
				<!-- <el-form-item prop="Verification">
					<el-input name="Verification" type="text" v-model="regForm.Verification" autocomplete="on"
						placeholder="管理员邀请码[联系2192555809@qq.com获取]" maxlength='16'>
					</el-input>
				</el-form-item> -->
				<el-form-item style="margin-bottom: 20px;text-align: center">
					<el-button style="width: 45%;" type="primary" :loading="loading"
						@click.native.prevent="handleRegister">
						注册</el-button>
				</el-form-item>
			</el-form>

		</div>
		<tag-detail ref="TagDetailDialog" @selected="handleSelectedTag"></tag-detail>
		
	</div>
</template>

<script>
	import BottomContentVue from "@/components/BottomContent.vue"

	import tagDetail from "@/views/user/components/tagDetail.vue"
	import {
		createUser
	} from '@/api/user.js'
	import {
		debounce
	} from "@/utils/common.js";
	export default {
		name: "userReg",
		components: {
			BottomContentVue,
			tagDetail
		},
		data() {
			const validateUsername = (rule, value, callback) => {
				if (value.trim().length < 1) {
					callback(new Error("用户名长度不能小于1位"));
				} else {
					callback();
				}
			};
			const validatePass = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error("密码不能小于6位"));
				} else {
					callback();
				}
			};
			const validateVerification = (rule, value, callback) => {
				if (!value) {
					callback(new Error("邀请码必填"));
				} else {
					callback();
				}
			};

			return {
				regForm: {
					username: "",
					password: "",
					gender: 1,
					hobbylist: [], //数组版 选择
					hobbys: "", //逗号分割的爱好 字符串
					signature: "", //个签
					Verification: ""
				},

				regRules: {
					username: [{
						required: true,
						trigger: "blur",
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: "blur",
						validator: validatePass
					}],
					// Verification: [{
					// 	required: true,
					// 	trigger: "blur",
					// 	validator: validateVerification
					// }]
				},
				loading: false
			}
		},
		mounted() {

		},
		methods: {
			//修改爱好标签回显
			handleSelectedTag(res) {
				this.regForm.hobbylist = res
				this.regForm.hobbys = res.toString(',');
			},
			//显示弹窗
			showTagDetail() {
				this.$refs.TagDetailDialog.openShow(this.regForm.hobbylist)
			},
			// 标签移除
			tagRemove(tag) {
				this.regForm.hobbylist.splice(this.regForm.hobbylist.indexOf(tag), 1);
				this.regForm.hobbys = this.regForm.hobbylist.toString(',');
			},
			handleRegister: debounce(function() {
				this.$refs.regForm.validate(valid => {
					if (valid) {
						this.loading = true;
						createUser(this.regForm).then(res => {
							this.$message({
								message: res.message,
								type: 'success',
								duration: 700
							});
							this.loading = false;
							//跳转登录页面
							this.$router.push({
								name: 'login',
								params: {
									username: this.regForm.username,
									password: this.regForm.password
								}
							})
						}).catch((err) => {
							this.loading = false;
						});
					} else {
						return false;
					}
				});
			}),
			handleLogin() {
				//跳转登录页面
				this.$router.push('login')
			}
		}
	}
</script>

<style scoped>
	.regPage {
		margin: auto;
		padding: 0;
		height: 97vh;
		width: 100%;
		min-width: 375px;
		position: relative;
	}

	.Obscuration {
		width: 90%;
		height: 90%;
		min-width: 375px;
		background-color: #89CFF3;
		filter: blur(20px);
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.container {
		width: 50%;
		/* height: 50vh; */
		min-width: 20rem;
		margin: auto;
		position: relative;
		top: 25%;
		background: linear-gradient(#00A9FF, #89CFF3, #A0E9FF, #CDF5FD);
		border-radius: 12px;
		border: 1px solid #fff;
	}

	.title {
		margin-top: 10px;
		color: #0055ff;
	}

	.color-main {
		color: #000;
	}

	.reg-right {
		font-size: 12px;
		color: #818181;
	}

	.reg-hint {
		position: absolute;
		cursor: pointer;
		height: 30px;
		line-height: 30px;
		font-size: 10px;
		color: #00A9FF;
		right: 2px;
	}

	.reg-hint-item {
		font-weight: bold;
		margin-left: 2px;
		color: #0000ff;
	}
</style>